<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
         <style>
             table{
                 width: 600px;
                 cursor: pointer;
             }
             table td{
                 text-align: center;
             }
             table th{
                 background-color: red;
             }
             table tr{
                 background-color: beige;
             }
         </style>
</head>
<body>
        
         <div id="dv">
             请输入姓名:
             <input type="text" value="" id="name">
             <br>
             请输入邮件:
             <input type="text" value="" id="email">
         </div>          
     <button id="bu">添加</button>
      <table border="1" cellpadding="0" cellspacing="0" id="td">
        <thead>
            <th>姓名</th>
            <th>邮箱</th>
        </thead> 
        <tbody id="tbd">
              <tr>
                  <td>
                      小王
                  </td>
                  <td>www.com</td>
              </tr>
        </tbody>  
      </table>
         

         <script> 
          $(function()
          {
              $("#bu").bind("click",function()
              {
                  var name = $("#name").val();
                  var email = $("#email").val();

                  $("#tbd").append("<tr id=k></tr>")
                  $("#k").append("<td>"+name+"</td>")
                  $("#k").append("<td>"+email+"</td>")
              })
          })
         </script>

</body>
</html>